<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link @click="uploadImgFn">
        <template #default>
          <van-image round class="avatar" :src="$store.state.headerImgUrl" />
          <!-- file 选择框 -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="onFileChange"
          />
        </template>
      </van-cell>
      <van-cell
        title="名称"
        is-link
        :value="profile.name"
        @click="changNameFn"
      />
      <!-- 修改用户名称的弹出框dialog -->
      <!-- before-close 关闭前的回调函数， -->
      <van-dialog
        v-model="isShowNameDialog"
        title="修改名称"
        show-cancel-button
        :before-close="onNameDialogBeforeClose"
      >
        <!-- 输入框field -->
        <van-field
          v-model.trim="userName"
          input-align="center"
          maxlength="7"
          placeholder="请输入名称"
          v-foo
        />
      </van-dialog>
      <van-cell
        title="生日"
        is-link
        :value="profile.birthday"
        @click="isShowBirth = true"
      />
      <!-- <van-cell title="性别" is-link :value="profile.gender === 0? '男':'女'" /> -->
      <!-- 修改生日的弹出层 -->
      <van-popup
        v-model="isShowBirth"
        position="bottom"
        :style="{ height: '50%' }"
      >
        <!-- 日期选择 -->
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @cancle="isShowBirth = false"
          @confirm="confirmFn"
        />
      </van-popup>
      <!-- 数据映射 -->
      <van-cell
        title="性别"
        is-link
        :value="profile.gender === 1 ? '女' : '男'"
        @click="isShowGender = true"
      />
      <!-- <van-dialog
        v-model="isShowGender"
        show-cancel-button
        :before-close="onNameDialogBeforeClose"
      >
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1">单选框 1</van-radio>
          <van-radio name="2">单选框 2</van-radio>
        </van-radio-group>
      </van-dialog> -->
      <!-- <van-cell title="性别" is-link :value="sexObj[profile.gender]" /> -->
    </van-cell-group>
  </div>
</template>

<script>
// 1. 点击出现修改姓名的弹框
// 弹框结构为弹框里面夹着input输入框，使用变量控制弹框的出现
// 点击姓名单元格，变量更改吗，弹框出现
// 输入框的自动聚焦功能v-foo，
// 此弹框的出现使用display：none控制出现，所有v-foo需要进行修改加入updated
// 2. 输入框校验
// 弹框的before-close事件中，使用v-model绑定输入框的值
// 如果点击取消，关闭弹窗done()
// 如果点击确认，获取输入框的值，进行正则判断（/正则表达式/.test(输入框的值)）
// 校验通过发送请求,将输入框的值赋值给页面，关闭弹窗done()
// 校验不通过，给出提示，done(false)
// 3.点击生日，进行生日修改
// 点击生日，弹出popup弹出层，弹出层里面包含时间选择器DatetimePicker
// 点击确认，获取时间，转化为字符串格式，发送请求，
// 关闭弹窗，修改页面内容
// import moment from 'moment'
import dayjs from 'dayjs'
import { getProfileApi, uploadImgeApi, editUserInApi } from '@/api'
import { mapMutations } from 'vuex'
export default {
  name: 'UserEdit',
  data () {
    return {
      profile: {}, // 用户基本资料
      // sexObj: {
      //   1: '女',
      //   0: '男',
      //   '-1': '保密'
      // },
      gender: 0, // 生日弹框中生日的显示
      userName: '', // 姓名弹框中的名称
      isShowNameDialog: false, // 控制名字弹框显示
      isShowBirth: false, // 修改生日的弹出层显示状态
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(2020, 0, 17), // 日期选择的值
      isShowGender: false
    }
  },
  // 初始化完成，发送请求获取用户信息，将获取数据赋值给内部变量铺设页面
  async created () {
    const res = await getProfileApi()
    // console.log(res)
    this.profile = res.data.data
    this.setHeaderImgUrlMutation(this.profile.photo)
    this.setUserNameMutation(this.profile.name)
    // 将生日赋值给时间选择器的当前时间
    this.currentDate = new Date(this.profile.birthday)
  },
  methods: {
    ...mapMutations(['setHeaderImgUrlMutation', 'setUserNameMutation']),
    // 点击图片，触发文件表单的点击事件更换头像
    uploadImgFn () {
      this.$refs.iptFile.click()
    },
    // 点击文件表单修改头像(点击不选也会触发事件)
    async onFileChange (e) {
      console.log(e.target.files[0])
      // e.target.files[0] 为所选文件对象，将其转化为formdata格式
      if (e.target.files.length > 0) {
        const formData = new FormData()
        formData.append('photo', e.target.files[0])
        const res = await uploadImgeApi(formData)
        // console.log(res)
        this.setHeaderImgUrlMutation(res.data.data.photo)
      }
    },
    // 点击名称，弹框显示,数据回填
    changNameFn () {
      this.isShowNameDialog = true
      this.userName = this.profile.name // 数据回填
    },
    // 姓名修改框关闭前,进行名字校验
    async onNameDialogBeforeClose (action, done) {
      // console.log(action) // confirm
      // console.log(done)
      // 如果点击确认
      if (action === 'confirm') {
        // 1-7位字符(包含大小写字母、文字)
        if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
          // 通过验证，发送请求将修改后内容
          await editUserInApi({
            name: this.userName
          })
          // console.log(res)
          // 页面更新
          this.profile.name = this.userName
          this.setUserNameMutation(this.userName)
          done()
        } else {
          this.$toast('请输入1-6位字符，包含中文、数字、大小写字母')
          done()
        }
        // 如果点击取消
      } else if (action === 'cancel') {
        done()
      }
    },
    // 点击选择日期的确认键
    async confirmFn (val) {
      // 时间格式转换
      // const date = moment(val).format('YYYY-MM-DD')
      const date = dayjs(val).format('YYYY-MM-DD')
      console.log(date)
      // 发送请求
      editUserInApi({
        birthday: date
      })
      // 页面更新
      this.profile.birthday = date
      this.isShowBirth = false
    }
  }
}
</script>
<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
